<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/personal/personal.css">
    <style>
    .tag_time{
        width:180px ;
        margin-bottom: 0px;
        margin-left: -10px;
        margin-right: 0px;
    }
        .myorder{
            background-color: #cccccc;margin-left: 15px
        }
        .btn{
            background-color: #cccccc;
        }

    #myTab li {
        width: 18%;
        margin-right: 5px;
    }

    #myTab li a {
        color: #9A9A9A;
        border: none;
        width: auto;
        font-size: 12px;
    }

    .btn {
        margin-top: 10px;
        float: right;
    }

    </style>
</head>
<body>
<div class="index_container">
    <div class="header">
        <div class="header_bar_container">
            <div class="header_bar">
                <ul class="header_bar_left">
                    <li>
                        <span class="icon-font icon-phone header_bar_icon"></span>
                        <p>1234567890</p>
                    </li>
                    <div class="site_pipe"></div>
                    <li>
                        <span class="icon-font icon-mail header_bar_icon"></span>
                        <p>12345@qq.com</p>
                    </li>
                </ul>
                <ul class="header_bar_right">
                    <li>
                        <div class="head_btn">
                            <div class="head_btn_title">登录</div>
                            <div class="head_btn_title">Login</div>
                        </div>
                    </li>
                    <div class="site_pipe"></div>
                    <li>
                        <div class="head_btn">
                            <div class="head_btn_title">注册</div>
                            <div class="head_btn_title">registred</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--导航-->
        <div class="header_nav_container">
            <div class="header_nav_box">
                <div class="my_address">
                    <span class="icon-font icon-address header_bar_icon"></span>
                    <p>London</p>
                </div>
                <div class="logo">
                    <img src="" alt="">
                </div>
                <div class="header_nav">
                    <ul>
                        <li class="active">
                            <a href="#">
                                <div class="title_zh">首页</div>
                                <div class="title_en">Home</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="title_zh">购货</div>
                                <div class="title_en">Purchase</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="title_zh">购货车</div>
                                <div class="title_en">Shopping Car</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="title_zh">我的</div>
                                <div class="title_en">Mine</div>
                            </a>
                        </li>
                        <li class="shop_search">
                            <div class="icon-font icon-search"></div>
                        </li>
                    </ul>
                </div>
                <!--搜索-->
                <div class="search_box">
                    <input type="text" class="" placeholder="请输入搜索内容/Enter the search content">
                    <div class="search_btn">
                        <div class="title_zh">搜索</div>
                        <div class="title_en">Search for</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--轮播-->
    <div class="banner">
        <ul>
            <li class="on" onclick="showList(0)"></li>
            <li onclick="showList(1)"></li>
            <li onclick="showList(2)"></li>
        </ul>
        <div class="banner_list">
            <a href="javascript:void (0);"><img src="../../image/banner/1.png" title="" alt=""></a>
            <a href="javascript:void (0);"><img src="../../image/banner/2.png" title="" alt=""></a>
            <a href="javascript:void (0);"><img src="../../image/banner/3.png" title="" alt=""></a>
        </div>
    </div>
    <div class="content">
        <div class="my_show_container">
            <div class="my_show_box">

                <div class="categories_list ">

                </div>

                <div class="my_show_content">
                    <div class="my_show_bar">
                        <div class="title_tag myorder" >
                            <p>我的订单</p>
                            <p>Personal information</p>
                        </div>

                        <div class="title_tag " >
                            <p >
                                <div>下单时间</div>
                                <div>order time</div>
                            </p>
                        </div>

                        <div class="title_tag tag_time">
                            <input class="form-control" type="text" style="height: 40px" name="startTime" id="startTime"
                                   onclick="getDate('startTime')">
                        </div>
                        <div class="title_tag">
                            <p >
                            <div>至</div>
                            <div>to</div>
                            </p>
                        </div>

                        <div class="title_tag tag_time">
                            <input class="form-control" type="text" style="height: 40px" name="endTime" id="endTime"
                                   onclick="getDate('endTime')">
                        </div>
                        <div class="title_tag btn btn-sm btn-default">
                            <div>搜索</div>
                            <div>order time</div>
                        </div>
                        <div style="clear: both;"></div>
                        <div class="my_show_area">
                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active" onclick="getListOrder('待处理')">
                                    <a href="#" data-toggle="tab">
                                        待处理</br>
                                        <span>to be process</span>
                                    </a>
                                </li>
                                <li onclick="getListOrder('待发货')">
                                    <a href="#" data-toggle="tab">
                                        待发货</br>
                                        <span>Add products</span>
                                    </a>
                                </li>
                                <li onclick="getListOrder('待确认')">
                                    <a href="#" data-toggle="tab">
                                        待确认</br>
                                        <span>Discount</span>
                                    </a>
                                </li>
                                <li onclick="getListOrder('待评价')">
                                    <a href="#" data-toggle="tab">
                                        待评价</br>
                                        <span>new offers</span>
                                    </a>
                                </li>
                                <li onclick="getListOrder('关闭交易')">
                                    <a href="#to5" data-toggle="tab">
                                        关闭交易</br>
                                        <span>new offers</span>
                                    </a>
                                </li>
                            </ul>
                            <div style="clear:both;"></div>
                        </div>

                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="to1">
                                <div id="list1">
                                    <div class="row ">
                                        <div class="col-lg-1"><img src="../../image/personal/s-logo.png"></div>
                                        <div class="col-lg-8">这里是店铺名称<br>This is store name</div>
                                        <div class="col-lg-3 pull-right">共计商品 1 件</div>
                                    </div>
                                    <div class="bottom-border"></div>
                                    <div class="order bottom-border">
                                        <div class="row">
                                            <div class="col-lg-2"><img src="../../image/personal/food.png"/></div>
                                            <div class="col-lg-6 ">
                                                <div>优质澳洲牛排<br>Quality Australian steak</div>
                                                <div style="margin-top: 15px">20$/kg</div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="row ">
                                                    <div class="col-lg-6 ">
                                                        <div>Total VAT</div>
                                                        <div style="margin-top: 15px">收取总额<br>Grand total</div>
                                                    </div>
                                                    <div class="col-lg-6 pull-right">
                                                        <div><img src="../../image/personal/money.png"> &nbsp;10
                                                        </div>
                                                        <div style="margin-top: 15px"><img
                                                                src="../../image/personal/money.png"> &nbsp; 200
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-top: 15px"></div>
                                    </div>

                                    <div class="btn btn-default ">
                                        <div>提醒发货</div>
                                        <div>Check the logistics</div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade in " id="to2">
                                <div id="list2">
                                    2
                                </div>
                            </div>
                            <div class="tab-pane fade in " id="to3">
                                <div id="list3">
                                    3
                                </div>
                            </div>
                            <div class="tab-pane fade in " id="to4">
                                <div id="list4">
                                    4
                                </div>
                            </div>
                            <div class="tab-pane fade in " id="to5">
                                <div id="list5">
                                    5
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <div class="slogan">
        <div class="slogan_title">
            <p>Here is the slogan</p>
        </div>
        <div class="sub_slogan_title">
            <p>Here is the slogan</p>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content">
            <div class="footer_cont_left">
                <div class="about_us_container">
                    <div class="footer_title">
                        <div class="title_zh">关于我们</div>
                        <div class="title_en">About us</div>
                    </div>
                    <div class="about_us_text">
                        <p>
                            这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容</p>
                    </div>
                </div>
                <div class="photos_stream_container">
                    <div class="footer_title">
                        <div class="title_zh">照片流</div>
                        <div class="title_en">Photos stream</div>
                    </div>
                    <div class="photos_img_box">
                        <div class="photos_img_a">
                            <img src="../../image/footer/photos1.png" alt="">
                        </div>
                        <div class="photos_img_b">
                            <img src="../../image/footer/photos2.png" alt="">
                        </div>
                        <div class="photos_img_c">
                            <img src="../../image/footer/photos3.png" alt="">
                        </div>
                        <div class="photos_img_d">
                            <img src="../../image/footer/photos4.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_cont_right">
                <div class="contact_us_container">
                    <div class="footer_title">
                        <div class="title_zh">联系我们</div>
                        <div class="title_en">Contact us</div>
                    </div>
                    <div class="contact_us_area">
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-address"></div>
                            <div class="contact_title">
                                <div class="title_zh">地址</div>
                                <div class="title_en">address</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是地址</div>
                                <div class="title_en">Here is the address</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-iconminesel1"></div>
                            <div class="contact_title">
                                <div class="title_zh">联系人</div>
                                <div class="title_en">contact</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是联系人</div>
                                <div class="title_en">Here is the contact</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-phone"></div>
                            <div class="contact_title">
                                <div class="title_zh">电话</div>
                                <div class="title_en">phone</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是电话号码</div>
                                <div class="title_en">Here is the phone number</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-mail"></div>
                            <div class="contact_title">
                                <div class="title_zh">邮箱</div>
                                <div class="title_en">mailbox</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是邮箱</div>
                                <div class="title_en">Here is the email</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_bottom_bar"><p>2018 © Metronic Shop UI. ALL Rights Reserved.</p></div>
    </div>
</div>

</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/laydate/laydate.js"></script>
<script src="../../js/common.js"></script>
<script>

    $(function () {
        bannerInit(); //轮播
       // setOrderList(data); //获取数据
        getDate("startTime"); //启动日期插件
        getDate("endTime");
    });
    var ident = false;
    $('.shop_search').click(function () {
        if (false == ident) {
            $('.search_box').show();
            ident = true;
        } else {
            $('.search_box').hide();
            ident = false;
        }
    })


    function getListOrder(type) {


    }
    /*
     * @description : 将数据渲染出来
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/22 15:20
     */
    function setOrderList(data, type) {
        var html = "";

        if ("待处理" == type) {
            html = " ";
        }

        console.log(html);
        $("#list").append(html);
    }

/*
 * @description :获取时间
 * @params:
 * @author : peng huaneng
 * @date : 2018/1/23 9:53
 */
    function getDate(location) {
        laydate.render({
            elem: '#'+location ,//指定元素
            type: 'datetime' ,
            trigger: 'click'
        });
    }
</script>
</html>